<template>
  <div class="meetingList">
    <mu-appbar :z-depth="0" style="width: 100%;top:0" color="white" text-color="primary">
      <mu-button icon slot="left">
        <header-back></header-back>
      </mu-button>
      我的会议
    </mu-appbar>
    <mu-container ref="container" class="load-more-wrap">
      <mu-load-more @refresh="refresh()" :refreshing="refreshing" :loading="loading" @load="load()"
                    :loaded-all="loaded">
        <mu-list :nested-indent="false" textline="two-line">
          <mu-paper round v-for="(item, index) in list" v-bind:key="item.id"
                    :z-depth="0">
            <mu-list-item style="margin: 1rem 0 1rem 0;padding: 1rem 0 1rem 0" :key="item.id"
            >
              <mu-list-item-action>
                <mu-avatar color="white" size="44">
                  <img v-if="item.img" :src="item.img">
                  <mu-icon color="primary" size="36" v-else value="meeting_room"></mu-icon>
                </mu-avatar>
              </mu-list-item-action>
              <mu-list-item-content @click="openPage(item.id)">
                <mu-list-item-title>{{item.name}}</mu-list-item-title>
                <mu-list-item-sub-title>{{item.description}}
                </mu-list-item-sub-title>
                <mu-list-item-sub-title>
                  <mu-list-item-after-text>
                    <mu-badge :content="item.schedule.name" :color="item.schedule.color"></mu-badge>
                  </mu-list-item-after-text>
                </mu-list-item-sub-title>
              </mu-list-item-content>
            </mu-list-item>
          </mu-paper>
        </mu-list>
      </mu-load-more>
    </mu-container>
    <mu-snackbar :color="color.color" position="top" :open.sync="color.open">
      <mu-icon left value="warning"></mu-icon>
      {{color.message}}
      <mu-button flat slot="action" color="#fff" @click="cancel">确定</mu-button>
    </mu-snackbar>
  </div>
</template>
<script>
  import headerBack from '@/components/headerBack';

  export default {
    name: 'meetingList',
    data() {
      return {
        loaded: false,
        title: '',
        list: [],
        num: 10,
        refreshing: false,
        loading: false,
        search: '',
        warning: '向上滑动查看更多',
        color: {
          color: 'primary',
          message: '您是否取消收藏该案件？',
          open: false,
          timeout: 3000
        },
        id: ""
      }
    },
    methods: {
      refresh() {
        this.refreshing = true;
        this.$refs.container.scrollTop = 0;
        setTimeout(() => {
          this.refreshing = false;
          this.num = 10;
          this.listData();
        }, 1000)
      },
      load() {
        this.loading = true;
        setTimeout(() => {
          this.loading = false;
          this.num += 10;
          this.listData();
        }, 1000)
      },
      listData() {
        const _self = this;
        let params = {
          currentPage: 1,
          pageSize: this.num
        };
        let now = new Date().getTime();
        this.postRequest("/meeting/list", params).then(res => {
          if (res.code === 200) {
            if (res.data) {
              _self.list = res.data.records;
              if (_self.list) {
                _self.list.map(item => {
                  let schedule = {
                    color: '',
                    name: ''
                  };
                  if (item.signStartTime > now) {
                    schedule.name = "签到未开始";
                    schedule.color = "grey";
                  } else if (item.signStartTime < now < item.signEndTime) {
                    schedule.name = "正在签到";
                    schedule.color = "green";
                  } else {
                    if (item.startTime > now) {
                      schedule.name = "签到已结束";
                      schedule.color = "red";
                    } else if (item.startTime < now > item.endTime) {
                      schedule.name = "会议进行中";
                      schedule.color = "green";
                    } else {
                      schedule.color = "red";
                      schedule.name = "会议已结束";
                    }
                  }
                  item.schedule = schedule;
                })
              }
            }
          }
        });
      },
      openPage(id) {
        this.$router.push({name: 'meetingInfo', query: {id: id}});
      },
      openColorSnackBar(id) {
        this.id = id;
        if (this.color.timer) clearTimeout(this.color.timer);
        this.color.open = true;
        this.color.timer = setTimeout(() => {
          this.color.open = false;
        }, this.color.timeout);
      },
      cancel() {
        let params = {
          ids: [this.id]
        };
        let _this = this;
        this.postRequest("/user/cancelCollect", params).then(res => {
          if (res.code === 200) {
            _this.color.open = false;
            this.refresh();
          }
        });
      }
    },
    components: {
      headerBack
    },
    mounted: function () {
      this.listData();
    }
  }
</script>

<style scoped lang="less">

  .meetingList {
    position: fixed;
    top: 0;
    width: 100%;
    overflow: hidden;
    height: 100%;
    z-index: 999;
    background-color: #f5f5f5;
  }

  .load-more-wrap {
    width: 100%;
    height: 90%;
    flex-direction: column;
    overflow: scroll;
    .mu-appbar {
      width: 100%;
    }
  }

  .load-more-content {
    flex: 1;
    overflow: auto;
    margin-bottom: 56px;
    -webkit-overflow-scrolling: touch;
  }

</style>
